<template>
	<view class="page">
		<nav-bar back>{{type}}<button class="confirm" @click="onSubmit()">保存</button></nav-bar>
		<view class="main">
			<view v-show="type==='更改名字'" class="nickName">
				<view>
					<input type="" v-model="userInfo.nickName" />
				</view>
				<view class="tip">
					好名字可以让你的朋友更容易记住你。
				</view>
			</view>
			<view v-show="type==='设置性别'" class="gender">
				<view @click="userInfo.sex=0">
					男<uni-icons v-show="userInfo.sex===0" type="checkmarkempty" size="24" color="#07c160"></uni-icons>
				</view>
				<view @click="userInfo.sex=1">
					女<uni-icons v-show="userInfo.sex===1" type="checkmarkempty" size="24" color="#07c160"></uni-icons>
				</view>
			</view>
			<view v-show="type==='个性签名'" class="sign">
				<input type="text" maxlength="30" v-model="userInfo.signature"/>
				<view class="num">{{30-userInfo.signature.length}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				type: '',
				userInfo: {}
			}
		},
		mounted() {},
		onLoad(params) {
			this.type = params.type
			let mine = this.userStore.userInfo;
			this.userInfo = JSON.parse(JSON.stringify(mine));
		},
		methods: {
			onSubmit() {
				this.$http({
					url: "/user/update",
					method: "PUT",
					data: this.userInfo
				}).then(() => {
					this.userStore.setUserInfo(this.userInfo);
					uni.showToast({
						title: "修改成功",
						icon: 'none'
					});
					setTimeout(() => {
						uni.navigateBack();
					}, 1000);
				})

			}
		},
	}
</script>

<style scoped lang="scss">
	.page {

		// background-color: #fff;
		.title {
			button {
				position: absolute;
				color: #fff;
				background-color: #07c160;
				right: 20rpx;
				bottom: 10rpx;
				padding: 0;
				font-size: 30rpx !important;
				width: 120rpx;
				line-height: 60rpx;
			}
		}

		.main {
			height: 100%;

			.gender {
				background-color: #fff;
				line-height: 100rpx;

				view {
					// padding: 0 40rpx;
					margin-left: 40rpx;

					.uni-icons {
						float: right;
						margin-right: 40rpx;
					}
				}

				view:first-child {
					border-bottom: 1rpx solid #ccc;
				}
			}

			.nickName {
				padding: 40rpx;

				view:first-child {
					display: flex;
					padding: 20rpx 0;
					border-bottom: 1rpx solid #ccc;
					margin-bottom: 20rpx;
				}

				.tip {
					color: #afafaf;
					font-size: 28rpx;
				}
			}

			.sign {
				position: relative;
				padding: 60rpx 30rpx 0rpx;

				input {
					border-bottom: #07c160 solid 1rpx;
					padding: 10rpx 60rpx 10rpx 10rpx;
				}

				.num {
					color: #ccc;
					font-size: 28rpx;
					position: absolute;
					right: 60rpx;
					bottom: 10rpx;
				}
			}
		}
	}
</style>